<div class="ui-course ui-classroom top-header" style="padding-bottom: 58px;">
    <div class="course-head-body">
        <div class="course-head">
            <img class="full-image" ng-src="{{ classRoom.largePicture }}" img-error="classroom" />
            <p class="mask">
                <a class="rating-body">
                    <span>
                        <i class="iconfont" ng-class="course.rating > i ? 'icon-favorfill' : 'icon-favor' " ng-repeat="i in ratingArray" ></i>
                    </span>
                    <span class="rating">{{ classRoom.rating | limitTo : 3 }}</span>
                </a>
                <a class="right rating-body">
                    <span class="rating">{{ classRoom.studentNum }}人在学</span>
                </a>
            </p>
        </div>
        <div class="item-body">
            <p class="course-title">{{ classRoom.title }}</p>
            <p class="course-price" ng-if="!member">
                <span class="price-block" ng-if="classRoom.priceType != 'Coin'">
                    {{ classRoom.price | formatPrice }}
                </span>
                <span class="price-block" ng-if="classRoom.priceType == 'Coin'">
                    {{ classRoom.coinPrice | formatCoinPrice }}
                    <small ng-if="classRoom.coinPrice > 0">{{ classRoom.coinName }}</small>
                </span>
            </p>
        </div>
        <div class="service-body ui-border-t" ng-if="classRoom.service.length > 0" ui-service-panel>
            <ul class="ui-list">
                <li ng-repeat="service in classRoom.service">
                <span class="label {{ service.class }}">{{ service.name }}</span>
                <span class="title">{{ service.title }}</span>
                </li>
            </ul>
            <a class="service-btn" expand="true">
                {{ classRoom.service.length }}个服务
                <i class="service-icon iconfont icon-arrowdropdown"></i>
            </a>
        </div>
    </div>
    <div class="ui-tab tab-top" ui-tab>
        <ul class="ui-tab-nav ui-border-tb">
            <li><span class="line">班级课程</span></li>
            <li><span>班级详情</span></li>
        </ul>
        <ul class="ui-tab-content tab-display">
            <li>
                <div ng-include=" 'view/classroom_courses.html' | coverIncludePath ">
                </div>
            </li>
            <li ng-onload="loadClassRoomDetail()">
                <div ng-include=" 'view/classroom_detail.html' | coverIncludePath ">
                </div>
            </li>
        </ul>
    </div>
</div>
<div class="ui-course-tool" style="box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);" ng-controller="ClassRoomToolController">
    <button class="ui-btn btn-gray-light btn-outline btn-col-15 iconfont icon-fenxiang" ng-click="shardClassRoom()">
    </button>

    <button class="ui-btn btn-green" ng-class="classRoom.vipLevelId <= 0 ? 'btn-col-75' : 'btn-col-35' " ng-click="joinClassroom()">
        立即加入
    </button>
    <button class="ui-btn btn-yellow btn-col-35 ui-nowrap" ng-click="learnByVip()" ng-if="classRoom.vipLevelId > 0 ">
        {{ getVipTitle(classRoom.vipLevelId) }}免费学
    </button>
</div>
